<template>
  <div class="block">
    <el-cascader
      :ref="casaderId"
      v-model="value"
      :key="cascaderIdx"
      :options="options"
      :disabled="disable"
      @change="handleChange"
      :show-all-levels="true"
      @expand-change="expandChange"
    />
  </div>

</template>
<script>
import { get } from '../utils/request'

export default {
  name: 'Cascader',
  props: ['type', 'disable'],
  data() {
    return {
      value: [],
      options: [],
      cascaderIdx: 0,
      showExperienceGroup: false,
      parmas: {}
      // defaultValue: ["110000", "110100", "110101"]
    }
  },
  computed: {
    casaderId() {
      return 'echarts' + Math.random() * 100000
    }
  },

  watch: {
  },
  created() {

  },
  mounted() {
    // this.initArea("-1")

  },
  methods: {
    showGroup() {
      this.showExperienceGroup = true
    },
    hiddenGroup() {
      this.showExperienceGroup = false
    },
    initArea(parentCode, defaultValue) {
      /*console.log('parentCode:',parentCode);
      console.log('defaultValue:',defaultValue);*/

      const that = this
      this.parmas.type = this.type
      let length = 0
      if (parentCode !== '0') {
        length = parentCode.length
        that.parmas.parentKey = parentCode[length - 1]
      } else {
        that.parmas.parentKey = parentCode
      }
      console.log('length',parentCode.length)
      get('/ht/listByParentCode.json', that.parmas).then(res => {
        if (length === 0) {
          that.options = res
          if (defaultValue.length > 0) {
            const codes = []
            codes[0] = defaultValue[0]
            that.initArea(codes, defaultValue)
          }
        }else if(length === 1) {
          let parentCode1 = parentCode[0]
          that.options.forEach(item => {
            if (item.value === parentCode1 ) {
              item.children = res
            }
          })
          if (defaultValue.length > 0) {
            const codes = []
            codes[0] = defaultValue[0]
            codes[1] = defaultValue[1]
            that.initArea(codes, defaultValue)
          }
        }else if(length === 2) {
          if (that.parmas.type === 0) {
            res.forEach(resItem => {
              delete resItem.children;
            })
            that.value=defaultValue;
          } else {
            if (defaultValue.length > 0) {
              const codes = []
              codes[0] = defaultValue[0]
              codes[1] = defaultValue[1]
              codes[2] = defaultValue[2]
              that.initArea(codes, defaultValue)
            }
          }
          let parentCode2 = parentCode[1]
          that.options.forEach(item => {
            item.children.forEach(items => {
              if (items.value === parentCode2 ) {
                items.children = res
              }
            })

          })
        }else if(length === 3) {
          res.forEach(resItem => {
            delete resItem.children;
          });
          let parentCode3 = parentCode[2]
          that.options.forEach(item => {
            item.children.forEach(items => {
              items.children.forEach((itch) =>{
                if (itch.value === parentCode3 ) {
                  itch.children = res
                }
              })

            })

          })
          if (defaultValue.length > 0) {
            that.value=defaultValue;
          }
        } else {

        }
        console.log('options:',that.options);
      })
    },

    handleChange(value) {
      this.$emit('changeValue', value)
    },
    expandChange(value) {
      this.initArea(value, [])
    },
    cascaderIdxData(val) {

      this.cascaderIdx = val
      // alert(val)
    }
  }
}
</script>
<style scoped>
    .block{
        width: 100%;
    }
   /deep/ .el-cascader{
        width: 100%;
    }
   /deep/  .el-input{
        width: 100%;
    }
</style>
